<template>
	<view class="container">
		<u-sticky>
		<u-navbar leftText="返回" title="头号玩家":safeAreaInsetTop="true" :placeholder="true" bgColor="#fe8281">
			<view class="u-nav-slot"slot="left" >
				<u-icon name="search"  size="25"  color="#fff"></u-icon>
			</view>
			<view  class="u-nav-slot" slot="center">
			   <view class="header-type">
			   	<text @click="show=true">游戏王日/简</text>
			   	<view style="float: right;margin-left: 10rpx;margin-top:10rpx;">
			   		<u-icon name="arrow-down"  size="16"  color="#fff"></u-icon>
			   	</view>
			   </view>
			</view>
		</u-navbar>
		
		<view class="type-sec">
			<u-tabs
			        :list="typeSecList"
			        lineWidth="0"
			        lineColor="#fff"
			        :activeStyle="{
			            color: '#303133',
						lineHeight: '60rpx',
			            fontWeight: 'bold',
						background:'#fff',
						paddingLeft:'20rpx',
						paddingRight:'20rpx',
						fontSize: ' 24rpx',
						transform: 'scale(1)',
						borderTopLeftRadius: '20rpx',
						borderTopRightRadius: '20rpx',
						
			        }"
			        :inactiveStyle="{
			            color: '#606266',
						transform: 'scale(1)',
						fontSize: ' 24rpx',
						borderBottomLeftRadius: '20rpx',
						borderBottomRightRadius: '20rpx',
						paddingLeft:'20rpx',
						paddingRight:'20rpx',
			        }"
			        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
			    >
			    </u-tabs>
		</view>
		<view style="margin-top: -6rpx">
			
				<view class="type-3rd-box">
					<view class="type-3rd-near" @click="type3rdI=-1">
						<image class="type-near-img" src="../../static/index/near.png" mode="widthFix"></image>
						<view class="type-near-zi" :class="type3rdI==-1?'active':''">最新上架</view>
					</view>
					<view class="type-line"></view>
					<view class="type-3rd-ul">
						<u-scroll-list  :indicator="false">
						<view class="tyoe-3rd-li" @click="changeType3rdI(index)" v-for="(item,index) in type3rdList">
							<image class="type-li-img" :src="item.url" mode="heightFix"></image>
							<view class="type-li-name" :class="type3rdI==index?'active':''">{{item.name}}</view>
							<view class="type-li-num">{{item.number}}</view>
						</view>
						</u-scroll-list>
					</view>
				</view>
		</view>
		</u-sticky>
		<view class="goods-container">
			 <u-row customStyle="margin-bottom: 10px;flex-wrap: wrap;word-break: break-all;" >
				<u-col span="4" v-for="item in 20">
					<view class="goods-box">
						<image class="goods-img" src="http://img.tdfx.com.cn/image2024/f0fa0946a95542649bb04acb0cd9a712.jpg" mode="widthFix"></image>
						<view class="goods-name">商品名称商品名称商品名称商品名称商品名称</view>
						<view class="goods-num">T101-Y02 <text class="goods-specs">N</text></view>
						<view class="goods-version">日</view>
						<view class="clear"></view>
						<view class="goods-price"><text>¥ </text>1起</view>
						<view class="goods-inventory">x️1</view>
					</view>
				</u-col>
				
				
			</u-row>
		</view>
		
		<u-popup :show="show" mode="top" :round="10" @close="show=false" >
			<view style="padding:40rpx" class="type1st-popup">
				<view class="type-1st-name" @click="changeType1stI(index)" :class="type1stI==index?'active':''" v-for="(item,index) in 20">游戏王 日文/简中</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				type3rdI:-1,
				type1stI:0,
				typeSecList:[{
					name:'近期更新'
				},{
					name:'简体中文'
				},{
					name:'第十二期'
				},{
					name:'第十一期'
				},{
					name:'第十期'
				},{
					name:'第九期'
				},{
					name:'第八期'
				}],
				type3rdList:[{
					url:'http://img.tdfx.com.cn/image2024/f0fa0946a95542649bb04acb0cd9a712.jpg',
					name:'战术实验卡组 征服王 ....',
					number:'T101-C'
				},{
					url:'http://img.tdfx.com.cn/image2024/f0fa0946a95542649bb04acb0cd9a712.jpg',
					name:'战术实验卡组 征服王 ....',
					number:'T101-C'
				},{
					url:'http://img.tdfx.com.cn/image2024/f0fa0946a95542649bb04acb0cd9a712.jpg',
					name:'战术实验卡组 征服王 ....',
					number:'T101-C'
				},{
					url:'http://img.tdfx.com.cn/image2024/f0fa0946a95542649bb04acb0cd9a712.jpg',
					name:'战术实验卡组 征服王 ....',
					number:'T101-C'
				},{
					url:'http://img.tdfx.com.cn/image2024/f0fa0946a95542649bb04acb0cd9a712.jpg',
					name:'战术实验卡组 征服王 ....',
					number:'T101-C'
				},{
					url:'http://img.tdfx.com.cn/image2024/f0fa0946a95542649bb04acb0cd9a712.jpg',
					name:'战术实验卡组 征服王 ....',
					number:'T101-C'
				},{
					url:'http://img.tdfx.com.cn/image2024/f0fa0946a95542649bb04acb0cd9a712.jpg',
					name:'战术实验卡组 征服王 ....',
					number:'T101-C'
				},{
					url:'http://img.tdfx.com.cn/image2024/f0fa0946a95542649bb04acb0cd9a712.jpg',
					name:'战术实验卡组 征服王 ....',
					number:'T101-C'
				},]
				
			}
		},
		onReady() {

		},
		created() {

		},
		onLoad() {

		},
		methods: {
			changeType3rdI(i){
				this.type3rdI=i
			},
			changeType1stI(i){
				this.type1stI=i
				this.show=false
			}

		}
	}
</script>

<style scoped>
	.header-type{
		float: left;
		overflow: hidden;
		margin-left: 20rpx;
		margin-top: 4rpx;
		line-height: 48rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-radius: 50px;
		color: #fff;
		font-weight: bold;
	}
	.type-sec{
		 background-color:#F8F8F8 ;
		overflow: hidden;
		padding-top: 10rpx;
		padding-left: 20rpx;
	}
	.type-sec-near{
		width: 160rpx;
		text-align: center;
		line-height: 60rpx;
		font-size: 24rpx;
		color: #333;
	}
	.type-3rd-box{
		background: #fff;
		padding-top: 20rpx;
		padding-left: 20rpx;
		overflow: hidden;
		
		
	}
	.type-3rd-near{
		float: left;
		margin-left: 20rpx;
		padding-right: 40rpx;
	}
	.type-line{
		float: left;
		height: 70rpx;
		width: 1px;
		background-color: #333;
		margin-top: 24rpx;
	}
	.type-near-img{
		width: 100rpx;
	}
	/deep/.u-tabs__wrapper__nav__item{
		padding: 0 !important;
	}
	.type-near-zi{
		
		width: 100rpx;
		text-align: center;
		color: #333;
		font-size: 24rpx;
	}
	.type-3rd-near .active{
		color: #e20000;
	}
	.type-3rd-ul{
		overflow: hidden;
	}
	.tyoe-3rd-li{
		float: left;
		margin-left: 20rpx;
	}
	.type-li-img{
		height: 100rpx;
		display: block;
		margin: 0 auto;
	}
	.type-li-name{
		width: 100rpx;
		text-align: center;
		color: #333;
		margin-top: 10rpx;
		font-size: 20rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.type-li-num{
		width: 100rpx;
		text-align: center;
		color: #e0e0e0;
		font-size: 20rpx;
		
	}
	.tyoe-3rd-li .active{
		color: #e20000;
	}
	.goods-container{
		overflow: hidden;
		margin-top: 20rpx;
	}
	.goods-box{
		border: 4rpx solid #F8F8F8;
		padding: 10rpx;
		background-color: #fff;
		overflow: hidden;
		border-radius: 4rpx;
	}
	.goods-img{
		width: 100%;
		display: block;
	}
	.goods-name{
		margin-top: 10rpx;
		font-size: 24rpx;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.goods-num{
		color: #999b9e;
		font-size: 20rpx;
		float: left;
		margin-top: 10rpx;
		
	}
	.goods-num text{ 
		color: #666;
		margin-left: 10rpx;
	}
	.goods-version{
		float: right;
		margin-top: 10rpx;
		line-height: 30rpx;
		    font-size: 20rpx;
		    padding-left: 4rpx;
		    padding-right: 4rpx;
		border: 1px solid #e0e0e0;
		border-radius: 4rpx;
	}
	.goods-price{
		color: #e20000;
		float: left;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
	.goods-price text{
		font-size: 20rpx;
	}
	.goods-inventory{
		margin-top: 20rpx;
		float: right;
		line-height: 40rpx;
		font-size: 20rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		background:#898b8e;
		color: #fff;
		border-radius: 4rpx;
	}
	.type-1st-name{
		width: 50%;
		float: left;
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #333;
	}
	.type1st-popup .active{
		color: #e20000;
		font-weight: bold;
	}
</style>